<template>
    <UserView class="UserPeruseView">
        <h2>最近阅览</h2>
        <div class="card card-book-info">
            <div class="card-body">
                <div class="card card-single" v-for="recently_visit_book in recently_visit_books.recently_visit_books[currentIndex]" :key="recently_visit_book.id">
                    <div class="card-body">
                        <div>
                            你在{{ recently_visit_book.visittime }}阅览了《{{ recently_visit_book.book_title }}》
                            <button type="button" class="btn btn-success" @click="go_visit(recently_visit_book.book_id, recently_visit_book.book_score)">前去阅览</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <button type="button" class="btn btn-success" @click="make_text">Success</button> -->
            <nav aria-label="Page navigation example book-pagination" v-if="recently_visit_books.recently_visit_books.length !== 0">
                <ul class="pagination">
                    <li class="page-item" :class="{ disabled: currentIndex === 0 }">
                        <a class="page-link" href="#" @click="go_to_page(currentIndex - 1)">上一页</a>
                    </li>
                    <li class="page-item" v-for="index in pageCount" :key="index" :class="{ active: index - 1 === currentIndex }">
                        <a class="page-link" href="#" @click="go_to_page(index - 1)">{{ index }}</a>
                    </li>
                    <li class="page-item" :class="{ disabled: currentIndex === pageCount - 1 }">
                        <a class="page-link" href="#" @click="go_to_page(currentIndex + 1)">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </UserView>
</template>

<script>
import UserView from '@/components/UserView.vue';
import $ from 'jquery';
import { reactive, ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import dayjs from 'dayjs';
export default {
    name: "UserPeruseView",
    components: {
        UserView,
    },
    setup() {
        const store = useStore();
        const router = useRouter();
        const recently_visit_books = reactive({recently_visit_books: []});
        const formattedDate = dayjs().format('YYYY-MM-DD HH:mm:ss');
        let pageCount = ref(0);
        let currentIndex = ref(0);
        $.ajax({
            url: "http://47.121.28.202:8000/settings/recently/",
            type: "GET",
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            data: {
                user_id: store.state.user.id,
            },
            success(resp) {
                console.log(resp);
                let currentPage = [];
                for (let i of resp) {
                    if (currentPage.length < 6) {
                        currentPage.push(i);
                    } else {
                        recently_visit_books.recently_visit_books.push(currentPage);
                        currentPage = [i];
                    }
                }
                if (currentPage.length > 0) {
                    recently_visit_books.recently_visit_books.push(currentPage);
                }
                pageCount.value = recently_visit_books.recently_visit_books.length;
            }
        })

        const go_to_page = (pageIndex) => {
            if (pageIndex >= 0 && pageIndex < pageCount.value) {
                currentIndex.value = pageIndex;
            }
        }

        const go_visit = (bookid, book_score) => {
            if(store.state.user.is_login) {
                $.ajax({
                    url: 'http://47.121.28.202:8000/settings/ranking/',
                    type: "PATCH",
                    headers: {
                        'Authorization': "Bearer " + store.state.user.access,
                    },
                    data: {
                        book_score: book_score + 3,
                        book_id: bookid,
                        user_id: store.state.user.id,
                        visittime: formattedDate,
                    },
                })
                router.push({
                    name: 'bookinfo',
                    params: {
                        bookid
                    }
                })
            } else {
                router.push({
                    name: 'login'
                })
            }
        }
        return {
            recently_visit_books,
            go_visit,
            pageCount,
            go_to_page,
            currentIndex
        }
    }
}
</script>

<style>
.card-single {
    margin-bottom: 10px;
}
.btn-success {
    float: right;
}
.UserPeruseView {
    user-select: none;
}
.pagination {
    position: relative;
    left: 380px;
}
</style>